import React, { Component } from 'react'
import { Layout, Table, Collapse, Checkbox } from 'antd'

/**
 * @author guankongjin
 * @description 角色权限详情
 */

const { Panel } = Collapse

interface DetialsProps {
  perm: any,
  havePerm: any
}

export default class Detials extends Component<DetialsProps> {

  permChange = () => {

  }

  render() {
    const { perm, havePerm } = this.props

    return (
      <div>
        {
          perm ?
            <Layout className='site-layout'>
              <Checkbox defaultChecked className='role-all-check'>全部 </Checkbox>

              <Collapse bordered={false} className="site-collapse-custom-collapse">
                {
                  perm.map((data: any, index: number) => {
                    const resources = data.resources

                    // 表格 columns 设置
                    const columns = [
                      {
                        title: 'ProcessName', dataIndex: 'processName', key: 'processKey', render: (value: string, record: any) => {
                          return {
                            children: <Checkbox {...havePerm.indexOf(record.processKey) >= 0 ? 'checked' : ''}
                              key={record.processKey}>{value}</Checkbox>,
                            props: { rowSpan: record.first ? record.moduleCount : 0 }
                          };
                        },
                        className: 'role-table-columns',
                      },
                      {
                        title: 'Name', dataIndex: 'name', key: 'key', render: (value: string, record: any) => {
                          const obj = {
                            children: <Checkbox key={record.key}>{value}</Checkbox>,
                            props: { checked: false }
                          };
                          if (havePerm.indexOf(record.key) !== -1) {
                            obj.props.checked = true
                          }
                          return obj
                        },
                        className: 'role-table-columns'
                      },
                      {
                        title: 'Perms', dataIndex: 'perms', key: 'perms', render: (value: any) => {
                          return value.map((data: any) => {
                            return <Checkbox key={data.key}>{data.name}</Checkbox>
                          })
                        },
                        className: 'role-table-columns'
                      }
                    ]

                    return (
                      <Panel header={
                        // 面板标题自定义
                        <Checkbox defaultChecked >{data.systemName}</Checkbox>
                      }
                        key={index} className="site-collapse-custom-collapse">
                        <Table
                          columns={columns}
                          dataSource={resources}
                          bordered
                          pagination={false}
                          showHeader={false}
                        />
                      </Panel>
                    )
                  })
                }
              </Collapse>
            </Layout>
            : <div></div>
        }
      </div>
    )
  }
}
